<template>
  <div>
     <div>
      <span>姓名:</span>
      <input type="text" v-model="a">
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model="b"/>
    </div>
    <div>
      <span>性别:</span>
      <select v-model="c">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="addFn">添加/修改</button>
    </div>
    <table border="1" cellpadding="10" cellspacing="0">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in list" :key="index" >
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.gender}}</td>
        <td>
          <button @click="del">删除</button>
          <button @click="bj(index,$event)">编辑</button>
        </td>
      </tr>
      <!-- <tr>
        <td>2</td>
        <td>Lee</td>
        <td>29</td>
        <td>female</td>
        <td>
          <button>删除</button>
          <button>编辑</button>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>Rose</td>
        <td>19</td>
        <td>male</td>
        <td>
          <button>删除</button>
          <button>编辑</button>
        </td>
      </tr> -->
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
     
      list: [
        {
          id: 1,
          name: "Tom",
          age: 19,
          gender: '男',
        },
        {
          id: 2,
          name: "Lee",
          age: 29,
          gender: '男',
        },
        {
          id: 3,
          name: "Rose",
          age: 19,
          gender: '女',
        },
      ],
      a: "",
      b: '',
      c: ""
    };
  },
  methods: {
    del(n) {
      this.list.splice(n,1)
    },
    addFn(){
      // if(this.objIndex !==null){
      //    this.$set(this.list,this.objIndex,obj)
      // }
      if(this.a == '' || this.b == '' || this.c == '' ) {
        return alert('请输入姓名年龄,性别不能为空')
      }
     let n = {
       id: this.list[this.list.length-1].id + 1,
       name: this.a,
       age: this.b,
       gender: this.c
     }
     this.list.splice(this.list.length,0,n)
    },
    bj(index,event){
        console.log(index)
        console.log(event)
        
        let obj = this.list[index]
        this.a =obj.name
        this.b =obj.age
        this.c =obj.gender
       
    }

  },
};
</script>

<style>
</style>